<template>
	<view class="detailed_container">
		<u-navbar :leftText="detailedTitle" :autoBack="true" :placeholder="true" />
		<view class="images_content" :style="{padding: `0rpx ${initPadding_lr}`}" v-if="activeImagesList">
			<view class="images_content_itemContainer" v-for="(item, index) in currentTypeWallpaperList" :key="index"
				:class="(index + 1) % 2 === 0? 'leftImageMargin' : 'rightImageMargin'" :style="{'height': imageHeight}"
				@click="go_deatiledWallpaperArr(currentTypeWallpaperList, index, item)">
				<image class="imageItem" :src="item.img" mode="aspectFill" />
			</view>
		</view>
		<u-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png" v-else="activeImagesList" />
	</view>
</template>

<script>
	import {
		currentTypeWallpaper
	} from '@/api'
	export default {
		data() {
			return {
				// 分类title
				detailedTitle: '',
				// 分类图片高度
				imageHeight: '650rpx',
				// 分类图片数据数组是否为空，是展示为空提示组件 u-empty
				activeImagesList: true,
			}
		},
		onLoad(option) {
			this.detailedTitle = option.name;
			this.get_detailedList(option.id);
		},
		methods: {
			async get_detailedList(id) {
				const detailedList = await currentTypeWallpaper(id, {
					params: {
						limit: 30, // 目前最多30个
						first: 0, // 起始数目
						skip: 180, // 略过数量
						adult: false,
						order: 'hot'
					}
				});
				detailedList.vertical.length ? this.activeImagesList = true : this.activeImagesList = false;
				this.activeImagesList ? this.$store.commit('currentTypeWallpaper', detailedList.vertical) : this.$store
					.commit('currentTypeWallpaper', []);
			},
			go_deatiledWallpaperArr(e, index, item) {
				uni.$u.route('/page_currentWallpaper/wallpaperItem/wallpaperItem');
				this.$store.commit('activeWallpaperType', false);
				this.$store.commit('currentWallpaperArr', e,);
				this.$store.commit('currentWallpaperIndex', index);
				this.$store.commit('currentWallpaperObjInfo', item);
			}
		},
		computed: {
			// 全局左右内边距
			initPadding_lr() {
				return this.$globalStyle.globalPadding_lr + 'rpx'
			},
			currentTypeWallpaperList() {
				return this.$store.state.isCurrentTypeWallpaper;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detailed_container {
		.images_content {
			margin-top: 40rpx;
			width: 100%;
			box-sizing: border-box;

			&_itemContainer {
				width: 49%;
				display: inline-block;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				overflow: hidden;
				position: relative;

				// &::after {
				// 	content: attr(data-descr);
				// 	position: absolute;
				// 	left: 0;
				// 	right: 0;
				// 	bottom: 0;
				// 	height: 100rpx;
				// 	background-color: rgba(0, 0, 0, 0.3);
				// 	backdrop-filter: blur(10px);
				// 	color: #eee;
				// 	font-size: 28rpx;
				// 	text-align: center;
				// 	border-bottom-left-radius: 20rpx;
				// 	border-bottom-right-radius: 20rpx;
				// 	// line-height: 100rpx;
				// }

				.imageItem {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.leftImageMargin {
		margin-left: 1%;
	}

	.rightImageMargin {
		margin-right: 1%;
	}
</style>
